<template>
  <div class="role">
    <!-- 按钮 -->
    <div class="bt">
      <el-form size="small" inline style="text-align: center">
        <el-form-item label="角色ID">
          <el-input v-model="param.roleId"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            plain
            type="primary"
            icon="el-icon-search"
            @click="loadBaseRolePrivilege"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        size="small"
        plain
        style="text-align: left"
        @click="toAddHandler"
        ><i class="el-icon-plus"> 新增</i></el-button
      >

      <el-button
        size="small"
        type="primary"
        plain
        style="text-align: right"
        @click="downloadHandler"
        ><i class="el-icon-upload el-icon--left">导出</i></el-button
      >
    </div>
    <!--按钮-->
    <!-- {{rolePrivilege}} -->

    <el-table style="width: 100%" size="small" :data="baseRolePrivilege">
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
      <el-table-column label="ID" prop="id" align="center"></el-table-column>
      <el-table-column
        label="角色ID"
        prop="roleId"
        align="center"
      ></el-table-column>
      <el-table-column
        label="权限ID"
        prop="privilegeId"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <!--
                <el-button type="text" size="mini" 
                @click="editHandler(scope.row)">修改</el-button>
                <el-button type="text" size="mini" 
                @click="deleteHandler(scope.row)">删除</el-button>
                -->
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-edit"
            @click="editHandler(scope.row)"
          ></el-button>

          <el-button
            type="danger"
            size="small"
            plain
            icon="el-icon-delete"
            @click="deleteHandler(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { del, get } from "@/utils/request";
export default {
  data() {
    return {
      param: {},
      baseRolePrivilege: [],
      // value: false,
    };
  },

  // created(){
  //    this.loadBaseRolePrivilege();
  //  },

  methods: {
    downloadHandler() {
      if (this.param.roleId) {
        window.location.href =
          "http://121.196.106.124:8888/userInfo/download?roleId=" +
          this.param.roleId;
      } else {
          window.location.href =
          "http://121.196.106.124:8888/userInfo/download";
        
      }
    },
    // 修改事件处理函数

    editHandler(row) {
      this.$router.push({
        path: "/BaseRole/BaseRolePrivilege_create",
        query:row,
      })
    },

    deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://121.196.106.124:8888/userInfo/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadBaseRolePrivilege();
        });
      });
    },

    toAddHandler() {
      this.$router.push("/BaseRole/BaseRolePrivilege_create");
    },

    loadBaseRolePrivilege() {
      let url = "http://121.196.106.124:8888/userInfo/query";
      get(url, this.param).then((resp) => {
        this.baseRolePrivilege = resp.data;
      });
    },
  },
  created() {
    this.loadBaseRolePrivilege();
  },
};
</script>
style <style  scoped>
.bt {
  margin-bottom: 0.5em;
}
</style>